import React,{Component} from 'react';
import{
   AppRegistry,
   StyleSheet,
   View,
   Image,
    Text,
   ScrollView
}from 'react-native';

let { width,height}  =  require('Dimensions').get('window');

let data = require('../Resource/scrollView/ImageData.json');

let TimerMixin = require('react-timer-mixin');

class KyScrollView extends Component{
    constructor(props){
        super(props);
        mixins: [TimerMixin]
        this.state = {
            dataList:data.data,
            currentPage:0
        }
    }
    render(){
        return(
            <View style={styles.container}>
                <ScrollView ref='scrollViewRef' contentContainerStyle={styles.scollViewStyle}
                            horizontal={true}
                            showsHorizontalScrollIndicator={false}
                            showsVerticalScrollIndicator={false}
                            pagingEnabled={true}
                            bounces={false}
                            onMomentumScrollEnd={(e)=>this._annimationEnd(e)}
                            onScrollBeginDrag = {()=>this._onBeginDrag()}
                            onScrollEndDrag={()=>this._onEndDrag()}>
                    {this._renderContent()}
                </ScrollView>

                <View style={styles.indicatorContentStyle}>
                    {this._renderPagingIndicator()}

                </View>


            </View>
        )
    }
    componentDidMount(){
        this._startTimer();
    }
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    _onBeginDrag(){
        this._startTimer();
    }
    _onEndDrag(){
        clearInterval(this.timer);
    }
    _startTimer(){
        let maxCount =  this.state.dataList.length;
        let scrollView = this.refs.scrollViewRef;
        let that = this;
        this.timer = setInterval(function () {
            if(that.state.currentPage < maxCount-1){
                that.setState({
                    currentPage : that.state.currentPage + 1
                });
            }else {
                that.setState({
                    currentPage : 0
                });
            }
            scrollView.scrollResponderScrollTo({
                x:that.state.currentPage * width,
                y:0,
                animated:true
            });

        },that.props.duration);

    }
    _renderContent(){
        var items = [];
        for (var i =0 ; i < this.state.dataList.length;i++){
            let imageData = this.state.dataList[i];
            items.push(
                <View key={i}>
                    <Image source={{uri:imageData.img}} style={{height:200,width:width}}></Image>
                </View>
            )
        }
        return items;
    }
    _renderPagingIndicator(){
        var indicators  = [];

        for (var i=0;i<this.state.dataList.length;i++){
            let style = this.state.currentPage == i ? {color:'orange'} : {color:'#FFFFFF'};
            indicators.push(
                <Text key={i} style={[{fontSize:25},style]}>&bull;</Text>
            )
        }
        return indicators;
    }
    _annimationEnd(e){
        let offsetX = e.nativeEvent.contentOffset.x;
        this.setState({
            currentPage:offsetX / width
        })
    }


}

KyScrollView.properties = {
    currentPage:React.PropTypes.int
}
KyScrollView.defaultProps = {
     duration:3000
}

const styles = StyleSheet.create({
    container:{

        // backgroundColor:'red',
        position:'relative'
    },
    scollViewStyle:{
        backgroundColor:'black'
    },
    indicatorContentStyle:{
        height:20,
        backgroundColor:'rgba(0,0,0,0.2)',
        position:'absolute',
        bottom:2,
        left:0,
        right:0,
        flexDirection:'row',
        alignItems:'center'


    }
});

module.exports =KyScrollView;

